<template>
	<div id="mine" class="_page">

		<div class="view1 width_img">
			<div class="loginbox fl">
				<img src="../../assets/image/normal-face.png" alt="" class="width_img" >
			</div>
			<p class="fl" @click="$router.push('./interview')">登录  / 注册</p>
		</div>

		<div class="view2" @click="$router.push('./interview')">
			我的订单 
			<span class="fr iconfont icon-you"></span>
		</div>

		<div class="view3">
			<div class="ic" @click="$router.push('./interview')">
				<p><span class="iconfont icon-qianbao"></span></p>
				<p>待付款</p>
			</div>
			<div class="ic" @click="$router.push('./interview')">
				<p><span class="iconfont icon-daishouhuo"></span></p>
				<p>待发货</p>
			</div>
			<div class="ic" @click="$router.push('./interview')">
				<p><span class="iconfont icon-buoumaotubiao46"></span></p>
				<p>退换修</p>
			</div>
		</div>
		
		<div class="view4">
			<ul>
				<li class="service border-b" @click="$router.push('./interview')">
					<span class="iconfont icon-huiyuan verspa yello"></span>
					<span>会员福利</span>
					<span class="iconfont icon-you fr"></span>
				</li>
				<li class="service" @click="$router.push('./interview')">
					<span class="iconfont icon-qianbao1 verspa bule"></span>
					<span>我的优惠</span>
					<span class="iconfont icon-you fr"></span>
				</li>
			</ul>
		</div>
		<div class="view5" @click="$router.push('./interview')">
			<ul>
				<li class="service border-b">
					<span class="iconfont icon-fuwuerji2 verspa red"></span>
					<span>服务中心</span>
					<span class="iconfont icon-you fr"></span>
				</li>
				<li class="service">
					<span class="iconfont icon-shop verspa orange"></span>
					<span>小米之家</span>
					<span class="iconfont icon-you fr"></span>
				</li>
			</ul>
		</div>
		<div class="view6" @click="$router.push('./interview')">
			<ul>
				<li class="service">
					<span class="iconfont icon-shezhi verspa gray"></span>
					<span>设置</span>
					<span class="iconfont icon-you fr"></span>
				</li>
			</ul>
		</div>
		<app-footer></app-footer>

	</div>
</template>

<script>
import Footer from '../footer/Footer'
export default {
	name:"mine",
	components:{
		"app-footer":Footer
	}
}
</script>

<style scoped>
	#mine{
		height: 90vh;
		background-color: #F5F5F5;
	}
	.view1{
		height: 85px;
		background: url(../../assets/image/bg.63c8e19.png) no-repeat;
		background-size:  100% 85px;
		background-color: #F37D0F;
	}
	.view1 .loginbox{
		width: 52px;
		height: 52px;
		margin: 15px 10px 0 20px;
		border-radius: 50%;
		border: 2px solid #F8B06D;
		box-sizing: border-box;
	}
	.view1 p{
		line-height: 85px;
		color: #fff;
		font-size: 15px;
	}
	.view2{
		padding: 0 15px;
		line-height: 45px;
		border-bottom: 1px solid #ccc;
		font-size: 14px;
		color: #666;
		background-color: #fff;
	}
	.view3{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		border-bottom: 1px solid #ccc;
		background-color: #fff;
		padding: 22px 0;
		margin-bottom: 15px;
	}
	.ic{
		text-align: center;
		font-size: 14px;
	}
	.ic span{
		display: block;
		font-size: 25px;
		color: #888;
		padding-bottom: 4px;
	}
	.view4,.view5,.view6{
		margin-bottom: 15px;
		background-color: #fff;
	}
	.service{
		padding: 5px 15px 5px 50px;
		line-height: 40px;
	}
	.border-b{
		border-bottom: 1px solid #eee;
	}
	.verspa{
		margin-left: -35px;
		margin-right: 20px;
		font-size: 23px;
	}
	.yello{
		color: #FDBF2D;
	}
	.bule{
		color: #51BBE0;
	}
	.red{
		color: #F96C5E;
	}
	.orange{
		color: #FF8B43;
	}
	.gray{
		color: #818C99;
	}
</style>